<template>
  <div class="video_box">
    <video ref="myvideo" :autoplay="autoplay" @timeupdate="getcurrentTime" @canplay="gettotal" :src="src" webkit-playsinline="true" playsinline="true" x5-playsinline></video>
    <div class="videocontrols flex-between">
      <div class="flex-star controlsleft">
        <svg class="icon" ref="playbtn" @click="vplay" aria-hidden="true">
          <use :xlink:href='this.play? "#icon-zantingtingzhi":"#icon-bofang"'></use>
        </svg>
        <div class="video_line">
          <div class="line_inner" :style='"width:"+line+"%"'></div>
          <input @change="lineChange" :value="line" type="range" />
        </div>
        <div class="vtime">
          {{currentTime | timefilter}}/{{duration | timefilter}}
        </div>
      </div>
      <div class="flex-star controlsRight">
        <div class="playspeed" @click="playspeedIsShowclick">
          倍数
          <div :style="playspeedIsShow? 'display:block':'display:none'" class="speed_chose">
            <div v-for="(item,index) in [2.0,1.5,1.25,1,0.75,0.5]" @click="setSpeed">{{item}}</div>
          </div>
        </div>
        <svg class="icon" ref="playbtn" @click="setMuted" aria-hidden="true">
          <use :xlink:href='isMuted? "#icon-jingyin":"#icon-yinliang"'></use>
        </svg>
        <svg class="icon" ref="playbtn" @click="toggleFullscreen" aria-hidden="true">
          <use xlink:href='#icon-max-screen'></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myvideo: null,
        play: null,
        currentTime: "00:00",
        duration: "00:00",
        playspeedIsShow: false,
        isMuted: false,
      }
    },
    filters: {
      timefilter(time) {
        time = Math.floor(parseFloat(time));
        let hours = Math.floor(time / 3600);
        let minutes = Math.floor(time / 60);

        if (minutes < 10) {
          minutes = "0" + minutes
        }

        let scond = time % 60;

        if (scond < 10) {
          scond = "0" + scond
        }

        if (hours) {
          return hours + ":" + minutes + ":" + scond;
        } else {
          return minutes + ":" + scond;
        }
      }
    },
    mounted() {
      this.play = this.autoplay;
      this.myvideo = this.$refs.myvideo;
    },
    props: {
      src: {
        type: String,
        required: true
      },
      autoplay: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      vplay() {
        if (this.play) {
          this.$notice({
            msg: "暂停",
            flag: true
          });
          this.myvideo.pause();
        } else {
          this.$notice({
            msg: "播放",
            flag: true
          });
          this.myvideo.play();
        }
        this.play = !this.play;
      },
      gettotal() {
        this.duration = this.myvideo.duration;
      },
      getcurrentTime() {
        this.currentTime = this.myvideo.currentTime;
      },
      playspeedIsShowclick() {
        this.playspeedIsShow = !this.playspeedIsShow;
      },
      setSpeed() {
        let speed = parseFloat(event.target.innerText)
        this.myvideo.playbackRate = speed;
        this.$notice({
          msg: speed + '倍播放',
          flag: true
        });
      },
      setMuted() {
        console.log();
        if (!this.myvideo.muted) {
          this.myvideo.muted = true;
        } else {
          this.myvideo.muted = false;
        }
        this.isMuted = !this.isMuted;
      },
      toggleFullscreen(){
        let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
        console.log(isFullscreen)
        if(!isFullscreen){
          const inFun = this.myvideo.requestFullScreen || this.myvideo.webkitRequestFullScreen;
          inFun.call(this.myvideo);
        }
      },
      lineChange(){
        let thisVal = parseInt(event.target.value);
        this.myvideo.currentTime = thisVal / 100 * this.myvideo.duration;
        // console.log()
      }
    },
    computed: {
      line() {
        return parseInt(Math.floor(parseFloat(this.currentTime)) / Math.floor(parseFloat(this.duration)) * 100);
      }
    }
  }
</script>

<style scoped>
  .video_box {
    width: 100%;
    position: relative;
    font-size: 0;
  }

  .video_box video {
    width: 100%;
  }

  .videocontrols {
    padding: .15rem .2rem;
    color: #fff;
    position: absolute;
    width: 100%;
    z-index: 1;
    font-size: .2rem;
    bottom: 0;
    left: 0;
  }

  .controlsleft {
    width: calc(100% - 2rem);
  }

  .videocontrols svg {
    width: .4rem;
    height: .4rem;
  }

  .vtime {
    margin-left: .1rem;
  }

  .video_line {
    height: 2px;
    width: 45%;
    margin-left: .15rem;
    position: relative;
    background: rgba(255, 255, 255, .5);
  }

  .line_inner {
    position: absolute;
    height: 2px;
    background: #fff;
    width: 50%;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 2px 2px rgba(255, 255, 255, .4);
  }

  .playspeed {
    position: relative;
  }

  .speed_chose {
    position: absolute;
    top: -2.2rem;
    text-align: center;
    background: rgba(255, 255, 255, .2);
    padding: 0 .2rem;
    border-radius: 4px;
    left: -.2rem;
  }

  .speed_chose div {
    padding: .02rem 0;
  }

  .controlsRight svg {
    margin-left: .15rem;
  }


  input[type=range] {
  	-webkit-appearance: none;
  	width: 100%;
    position: absolute;
    display: block;
    left: -.05rem;
    top: -.05rem;
  	border-radius: 10px;
  }

  input[type=range]::-webkit-slider-thumb {
  	-webkit-appearance: none;
  }

  input[type='range']::-webkit-slider-runnable-track {
  	height: 2px;
  	border-radius: 2px;
  }

  input[type='range']:focus {
  	outline: none;
  }

  input[type='range']::-webkit-slider-thumb {
  	-webkit-appearance: none;
  	height: .2rem;
  	width: .2rem;
  	margin-top: -0.09rem;
  	/*使滑块超出轨道部分的偏移量相等*/
  	background: #fafff6;
  	border-radius: 50%;
  	/*外观设置为圆形*/
  	border: solid 1px #dcc7ff;
  	/*设置边框*/
  	box-shadow: 0 0.125em 0.125em #3b4547;
  	/*添加底部阴影*/
  }

  input[type='range']::-webkit-fill-lower {
  	/*进度条已填充的部分*/
  	height: 22px;
  	border-radius: 10px;
  	background: red;
  }


</style>
